<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加erp订单</title>
    <#include "/header.html">
</head>
<style long="scss">
    .el-dialog__headerbtn {
        top: 11px;
    }

    .el-dialog__header {
        background-color: #ecf0f5;
        padding: 11px 15px 10px;
    }

    .el-dialog__body {
        padding: 15px;
    }

    .el-collapse-item__content {
        padding-bottom: 10px;
    }
</style>
<body>
<div id="addErpOrderApp" v-cloak class="panel panel-default">
    <!--主表信息填写-->
    <div class="panel-heading">主要信息</div>
    <el-form :inline="true"
             :model="erpOrder"
             size="mini"
             ref="addErpOrderForm"
             style="padding: 15px"
             label-width="100px"
             class="demo-form-inline">
        <el-form-item label="客户选择"
                      prop="memberName"
                      :rules="[{ required: true, message: '请选中客户', trigger: 'change' }]"
        >
            <el-input v-model="erpOrder.memberName" style="width: 180px" placeholder="请选择客户" readonly>
                <el-button slot="append" icon="el-icon-search" @click="openUserDialog"></el-button>
            </el-input>
        </el-form-item>

        <el-form-item label="联系人"
                      prop="shipName"
                      :rules="[{ required: true, message: '请选择联系人', trigger: 'blur' }]"
        >
            <el-input v-model="erpOrder.shipName" placeholder="联系人"/>
        </el-form-item>

        <el-form-item label="手机" prop="shipTel">
            <el-input v-model="erpOrder.shipTel" placeholder="手机"/>
        </el-form-item>

        <el-form-item label="固定电话" prop="shipMobile">
            <el-input v-model="erpOrder.shipMobile" placeholder="固定电话"/>
        </el-form-item>

        <el-form-item label="接单时间"
                      prop="orderCreatetime"
                      :rules="[{ required: true, message: '请选接单时间', trigger: 'change' }]"
        >
            <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 180px"
                    v-model="erpOrder.orderCreatetime"
                    type="datetime"
                    clearable=false
                    placeholder="选择日期时间"
            >
            </el-date-picker>
        </el-form-item>

        <el-form-item label="业务员" prop="merchantsSalesMan">
            <el-select v-model="erpOrder.merchantsSalesMan" style="width: 180px" filterable placeholder="请选择">
                <el-option
                        v-for="item in salesManList"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="项目名称" prop="projectName">
            <el-input v-model="erpOrder.projectName" placeholder="项目名称"/>
        </el-form-item>

        <el-form-item label="接单员" prop="acceptOrderUser">
            <el-select v-model="erpOrder.acceptOrderUser" style="width: 180px" filterable placeholder="请选择">
                <el-option
                        v-for="item in acceptOrderUserData"
                        :key="item.username"
                        :label="item.username"
                        :value="item.username">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="送货方式" prop="sendType">
            <el-select v-model="erpOrder.sendType" style="width: 180px" placeholder="请选择">
                <el-option
                        v-for="item in sendType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="可挂账" prop="credit" v-if="visible.credit">
            <el-switch
                    v-model="erpOrder.onCredit"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
        </el-form-item>

        <el-form-item label="收货地区" prop="shipName">
            <el-cascader
                    style="width: 180px"
                    @change="handleItemChange"
                    placeholder="试试搜索：武汉市" :options="area" filterable>
            </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址">
            <el-input v-model="erpOrder.shipAddr" placeholder="详细地址"/>
        </el-form-item>

        <br>
        <el-form-item label="是否收押金" prop="deposit">
            <el-switch
                    v-model="erpOrder.deposit"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
        </el-form-item>

        <el-form-item label="押金金额" v-if="erpOrder.deposit" prop="payed">
            <el-input v-model="erpOrder.payed" placeholder="押金金额"/>
        </el-form-item>

        <el-form-item label="支付方式" v-if="erpOrder.deposit" prop="payment">
            <el-select v-model="erpOrder.payment" style="width: 180px" filterable placeholder="请选择">
                <el-option
                        v-for="item in payTypeData"
                        :key="item"
                        :label="item"
                        :value="item">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="备注">
            <el-input type="textarea" style="width: 600px" :rows="2" placeholder="请输入内容"
                      v-model="erpOrder.memo"></el-input>
        </el-form-item>

    </el-form>
    <!--算价模块-->
    <div class="panel-heading">算价</div>
    <div style="padding-left: 10px">
        <el-menu class="el-menu-demo" mode="horizontal"
                 size="mini"
                 menu-trigger="click"
                 active-text-color="#66b1ff"
                 ref="categoryMenu"
                 @select="handleSelect">
            <el-submenu index="1">
                <template slot="title">快印商品</template>
                <el-menu-item :index="category.ziyunCategoryId" type="fast"
                              v-for="(category, index) in calculatePrice.fast.categoryData">
                    {{category.categoryName}}
                </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">商务印刷</template>
                <el-menu-item :index="category.ziyunCategoryId" type="print"
                              v-for="(category, index) in calculatePrice.print.categoryData">
                    {{category.categoryName}}
                </el-menu-item>
            </el-submenu>
            <el-menu-item index="3">标品</el-menu-item>
        </el-menu>
        <!--产品信息展示-->
        <!--1. 循环部件-->
        <el-collapse v-model="calculatePrice.mustChoiceParts">
            <el-form :inline="true" :model="calculatePrice.calculateData" :rules="calculatePrice.calculateFormRules"
                     ref="calculateForm"
                     label-width="100px" class="demo-form-inline" size="mini">
                <el-collapse-item
                        v-for="quoteParts in calculatePrice.quoteProductInfo.quotePartsList"
                        :title="quoteParts.name"
                        :name="quoteParts.constructId"
                >
                    <!--展示每个部件quoteAttributeList-->
                    <!--普通属性-->
                    <el-form-item
                            style="margin-bottom: 0px"
                            v-for="quoteAttribute in quoteParts.quoteAttributeList"
                            v-if="quoteAttribute.attributeType == 'normal' "
                    >
                        <el-form-item
                                style="margin-bottom: 0px"
                                :label="quoteAttribute.name"
                                :prop="'attributesMap.'+quoteParts.constructId+'.'+quoteAttribute.attributeTypeValue"
                        >
                            <!--展示属性选项-->
                            <el-select
                                    style="width: 130px"
                                    v-model="calculatePrice.calculateData.attributesMap[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                    clearable placeholder="请选择">
                                <el-option
                                        v-for="quoteOption in quoteAttribute.quoteAttributeOptionList"
                                        :key="quoteOption.id"
                                        :label="quoteOption.name"
                                        :value="quoteOption.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!--展示自定义-->
                        <el-checkbox
                                v-model="calculatePrice.isShowDefined[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                v-if="quoteAttribute.canDefinition"
                                @change="defineChange(quoteParts.constructId,quoteAttribute,$event)">
                            自定义
                        </el-checkbox>
                        <el-form-item
                                v-if="calculatePrice.isShowDefined[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                v-for="(define,index) in calculatePrice.definedArr[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                :prop="'definitionValueMap.'+quoteParts.constructId+'.'+quoteAttribute.attributeTypeValue+'.'+index">
                            <el-input
                                    v-model.number="calculatePrice.calculateData.definitionValueMap[quoteParts.constructId][quoteAttribute.attributeTypeValue][index]"
                                    style="width: 70px"
                                    :placeholder="define">
                            </el-input>
                        </el-form-item>


                    </el-form-item>
                    <!--必选显示工艺-->
                    <el-form-item
                            style="margin-bottom: 0px"
                            v-for="quoteAttribute in quoteParts.quoteAttributeList"
                            v-if="quoteAttribute.attributeType == 'craft' && quoteAttribute.mustChioce == true &&
                            quoteAttribute.attributeDisplay == true "
                            :label="quoteAttribute.name"
                            :prop="'attributesMap.'+quoteParts.constructId+'.'+quoteAttribute.attributeTypeValue">
                        <!--展示属性选项-->
                        <el-select
                                style="width: 130px"
                                v-model="calculatePrice.calculateData.attributesMap[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                clearable placeholder="请选择">
                            <el-option
                                    v-for="quoteOption in quoteAttribute.quoteAttributeOptionList"
                                    :key="quoteOption.id"
                                    :label="quoteOption.name"
                                    :value="quoteOption.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--材料-->
                    <el-form-item
                            style="margin-bottom: 0px"
                            v-for="quoteAttribute in quoteParts.quoteAttributeList"
                            v-if="quoteAttribute.attributeType == 'material' "
                            :label="quoteAttribute.name"
                            :prop="quoteParts.constructId+quoteAttribute.attributeTypeValue">
                        <!--展示材料属性选项-->
                        <el-select style="width: 130px"
                                   v-model="calculatePrice.material[quoteParts.constructId].defaultOption"
                                   @change="materialChange($event,quoteParts.constructId,quoteAttribute.quoteAttributeOptionList)"
                                   clearable placeholder="材料">
                            <el-option
                                    v-for="quoteOption in quoteAttribute.quoteAttributeOptionList"
                                    :key="quoteOption.optionKey"
                                    :label="quoteOption.name"
                                    :value="quoteOption.optionKey">
                            </el-option>
                        </el-select>
                        <el-select
                                style="width: 100px"
                                v-model="calculatePrice.calculateData.attributesMap[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                clearable placeholder="克重">
                            <el-option
                                    v-for="materialOption in calculatePrice.material[quoteParts.constructId].sonOptionList"
                                    :key="materialOption.id"
                                    :label="materialOption.name"
                                    :value="materialOption.id">
                            </el-option>

                        </el-select>
                        <el-checkbox
                                v-if="quoteParts.selfPaper === true"
                                v-model="calculatePrice.calculateData.selfPaperParts[quoteParts.constructId]"
                                style="font-size: 12px">
                            <span style="font-size: 10px">自来纸</span>
                        </el-checkbox>
                    </el-form-item>
                    <!--非必选显示工艺-->
                    <p v-show="calculatePrice.isShowCraft[quoteParts.constructId]">
                        <el-checkbox v-model="calculatePrice.addShowCraft[quoteParts.constructId]">添加工艺</el-checkbox>
                    </p>
                    <el-form-item
                            style="margin-bottom: 0px"
                            v-for="quoteAttribute in quoteParts.quoteAttributeList"
                            v-if="quoteAttribute.attributeType == 'craft' && quoteAttribute.mustChioce != true &&
                            quoteAttribute.attributeDisplay == true && calculatePrice.addShowCraft[quoteParts.constructId] == true "
                            :label="quoteAttribute.name"
                            :prop="quoteAttribute.attributeTypeValue">
                        <!--展示属性选项-->
                        <el-select
                                style="width: 130px"
                                v-model="calculatePrice.calculateData.attributesMap[quoteParts.constructId][quoteAttribute.attributeTypeValue]"
                                clearable placeholder="请选择">
                            <el-option
                                    v-for="quoteOption in quoteAttribute.quoteAttributeOptionList"
                                    :key="quoteOption.id"
                                    :label="quoteOption.name"
                                    :value="quoteOption.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-collapse-item>
                <el-button
                        style="margin: 5px;margin-left: 40%;"
                        size="mini"
                        v-if="calculatePrice.mustChoiceParts.length >0"
                        type="primary"
                        @click="submitForm('calculateForm')">算价
                </el-button>
            </el-form>
        </el-collapse>
    </div>
    <!--订单详情-->
    <div class="panel-heading">订单详情</div>
    <div style="padding-left: 10px">
        <el-table border :data="detailData" stripe style="width: 100%" size="mini">
            <el-table-column type="expand">
                <template slot-scope="props" v-if="props.row.productInfoParamList">
                    <el-table
                            size="mini"
                            stripe
                            :data="props.row.productInfoParamList"
                            style="width: 100%">
                        <el-table-column label="部件名称" prop="partsName"></el-table-column>
                        <el-table-column label="规格属性" width="700" prop="basicParamStr"></el-table-column>
                        <el-table-column label="尺寸">
                            <template slot-scope="scope">
                                    <span v-if="props.row.cutModelObj[scope.row.partsId] !=null">
                                        {{props.row.cutModelObj[scope.row.partsId].paperLength}}*
                                        {{props.row.cutModelObj[scope.row.partsId].paperWide}}
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="印数">
                            <template slot-scope="scope">
                                    <span v-if="props.row.cutModelObj[scope.row.partsId] !=null">
                                         {{props.row.cutModelObj[scope.row.partsId].printNums[0]}}
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="单价">
                            <template slot-scope="scope">
                                    <span v-if="props.row.cutModelObj[scope.row.partsId] !=null">
                                        {{props.row.cutModelObj[scope.row.partsId].unitPrice}}
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="起步价">
                            <template slot-scope="scope">
                                    <span v-if="props.row.cutModelObj[scope.row.partsId] !=null">
                                        {{props.row.cutModelObj[scope.row.partsId].startPrice}}
                                    </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="工艺" prop="craftParamStr"></el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="productName" >
            </el-table-column>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="280">
            </el-table-column>
            <el-table-column prop="price" label="单价" width="280">
            </el-table-column>
            <el-table-column prop="total" label="总价" width="280">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="deleteGoods(scope.$index)" size="mini" type="danger"> 移除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!--提交按钮-->
    <div  style="padding: 10px;padding-left: 45%">
        <el-button type="primary" size="small" icon="el-icon-sold-out" @click="saveOrUpdate">下单</el-button>
        <el-button type="default" size="small" icon="el-icon-back" @click="javascript:history.go(-1)">返回</el-button>
   <!--     <input type="button" class="btn btn-primary  btn-sm" @click="saveOrUpdate" value="下单"/>&nbsp;&nbsp;
        <input type="button" class="btn btn-warning  btn-sm" @click="reload" value="返回"/>-->
    </div>
    <!--弹窗信息 start -->
    <!--客户选择dialog-->
    <el-dialog title="选择客户" :visible.sync="visible.userDialogVisible">
        <el-form :inline="true" size="mini">
            <el-form-item label="客户名称">
                <el-input v-model="query.name" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryUser" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <span><span style="color: red">*</span> 双击选中客户</span>
            </el-form-item>
        </el-form>
        <el-table :data="userInfoData"
                  border
                  size="mini"
                  @row-dblclick="selectUser"
                  :header-cell-style="{'text-align':'center'}"
                  :cell-style="{'text-align':'center'}"
        >
            <el-table-column property="userId" label="用户id" width="100"></el-table-column>
            <el-table-column property="name" label="姓名" width="150"></el-table-column>
            <el-table-column property="nickname" label="联系人" width="150"></el-table-column>
            <el-table-column property="tel" label="手机" width="150"></el-table-column>
            <el-table-column property="address" label="地址" width="200"></el-table-column>
            <el-table-column property="hangsAccountCustomer" label="挂账客户" width="150">
                <template slot-scope="scope">
                    {{scope.row.hangsAccountCustomer?"挂账客户":"非挂账客户"}}
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <!--计算价格展示-->
    <el-dialog
            title="销售价格"
            :visible.sync="visible.quotePriceVisible"
            width="550px"
            center>
        <template>
            <div style="text-align: center">
                <el-radio  style="height: auto" v-for="(fastFactoryQuoteInfo, index) in calculatePrice.quotePriceInfoList" border v-model="calculatePrice.selectedPrice" :label="fastFactoryQuoteInfo">
                    <div >{{fastFactoryQuoteInfo.quantity}}本</div>
                    <div style="margin-top: 5px">{{fastFactoryQuoteInfo.unitPrice}}/本</div>
                    <div style="margin-top: 5px">{{fastFactoryQuoteInfo.totalPrice}}元</div>
                </el-radio>
            </div>
            <div style="margin-top: 30px ;text-align: center"> 销售金额：<el-input placeholder="输入销售金额" v-model="calculatePrice.salesAmount" style="width:180px" clearable size="small"> </el-input></div>
        </template>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="addCalculatePrice" size="small">确 定</el-button>
  </span>
    </el-dialog>

    <!--添加产品dialog-->
    <el-dialog title="添加产品" :visible.sync="visible.productDialogVisible" width="80%">
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-tree :data="calculatePrice.categoryData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </el-aside>

            <el-container>
                <el-header style="text-align: left; font-size: 12px">
                    <el-row :gutter="20">
                        <el-col :span="10" >
                            <el-input placeholder="产品名称" size="small"  v-model="query.productName">
                                <template slot="prepend">产品名称:</template>
                            </el-input>
                        </el-col >
                        <el-col :span="5" >
                            <el-button type="primary" size="small" icon="el-icon-search" @click="productSearch()">搜索</el-button>
                        </el-col >
                    </el-row>
                </el-header>

                <el-main>
                    <template>
                        <el-table
                                :data="goodsData"
                                border
                                max-height="250"
                                style="width: 100%">
                            <el-table-column
                                    fixed="left"
                                    label="操作"
                                    width="120">
                                <template slot-scope="scope">
                                    <el-button @click="addProduct(scope.row)" type="text" size="small">添加</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="productId"
                                    label="产品编号"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="产品名称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="weight"
                                    label="重量"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="craft"
                                    label="规格属性"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="pricingManner"
                                    label="计价方式"
                                    width="100"
                            >
                                <template scope="scope" v-if="scope.row.goodsType=='material'">
                                    <span>{{scope.row.pricingManner?"按周长计价":"按面积计价"}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="unit"
                                    label="单位"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="价格"
                                    width="120"
                            >
                            </el-table-column>
                            <el-table-column
                                    label="阶梯价格"
                            >
                                <template slot-scope="scope">
                                    <el-button @click="seeStepPrice(scope.row)"  v-show="scope.row.stepPrice!='[]'&&scope.row.stepPrice!=null"  type="text" size="small">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <!--下方table-->
                    <div style="margin-top: 5px;"><h4 style="color: #0f6ab4">选中商品详情</h4></div>
                    <template>
                        <el-table
                                :data="goodsTableData"
                                border
                                max-height="250"
                                style="width: 100%">
                            <el-table-column
                                    prop="productId"
                                    label="产品编号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="产品名称"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="weight"
                                    label="重量"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="craft"
                                    label="规格属性"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="pricingManner"
                                    label="计价方式"
                                    width="200">
                                <template scope="scope" v-if="scope.row.goodsType=='material'">
                                    <span>{{scope.row.pricingManner?"按周长计价":"按面积计价"}}</span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                    label="周长或面积"
                                    width="200">
                                <template scope="scope" v-if="scope.row.goodsType=='material'">
                                    <el-input size="small"   @keyup.native="changeArea(scope.row)" style="width:80px" v-model="scope.row.length" ></el-input>
                                    <span v-show="scope.row.pricingManner!=true">* <el-input size="small"  @keyup.native="changeArea(scope.row)" style="width:80px" v-model="scope.row.width" ></el-input>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="unit"
                                    label="单位"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="price"
                                    label="单价"
                                    width="120"
                            >
                            </el-table-column>
                            <!--  <el-table-column
                                      prop="copy"
                                      label="份数"
                                      width="120">
                              >
                                  <template scope="scope">
                                      <el-input size="small" @change="changCopy(scope.row)" v-model="scope.row.copy" ></el-input>
                                  </template>
                              </el-table-column>-->
                            <el-table-column
                                    prop="quantity"
                                    label="数量"
                                    width="120">
                                >
                                <template scope="scope" >
                                    <el-input size="small"  @keyup.native="changeQuantity(scope.row)" v-model="scope.row.quantity" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="total"
                                    label="总价"
                                    width="120">
                                >
                                <template scope="scope">
                                    <el-input size="small" disabled v-model="scope.row.total" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button @click="deleteProduct(scope.$index,goodsTableData)"   type="text" size="small">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-main>
                <el-footer>
                    <el-row>
                        <el-col :span="5" :offset="4">
                            <el-button  type="primary" size="small" @click="addToMainTable">添加</el-button>
                            <el-button  type="primary" size="small" @click="cancelAdd">取消</el-button>
                        </el-col>
                    </el-row>
                </el-footer>
            </el-container>
        </el-container>
    </el-dialog>
    <!--弹窗信息 end -->

</div>
<script src="${request.contextPath}/statics/js/modules/order/addErpOrder.js?_${.now?long}"></script>
</body>
</html>